<!--
 * @Description:
 * @Author 卞鹏飞 <228443632@qq.com>
 * @create 21/08/24 1:35 PM
 -->
<!--setup-->
<script setup>
import { onMounted, getCurrentInstance, ref } from 'vue'
import BaseQueryFilter from '@shared/base/base-query-filter/index'
import { openModal } from '@shared/base/open'
import ImportIncomingPartNum from './components/ImportIncomingPartNum.vue' // 进件号导入弹框

const { proxy } = getCurrentInstance()
const props = defineProps({})
const emit = defineEmits([])

/* 状态 */
const queryData = ref({
  projName: '',
  payWay: [1, 2],
  fields1: '',
  fields2: []
})
const options = ref({
  payWay: [
    { key: 1, label: '支付宝' },
    { key: 2, label: '微信' }
  ],

  opt1: [
    {
      value: 'guide',
      label: 'Guide',
      children: [
        {
          value: 'disciplines',
          label: 'Disciplines',
          children: [
            {
              value: 'consistency',
              label: 'Consistency'
            },
            {
              value: 'feedback',
              label: 'Feedback'
            },
            {
              value: 'efficiency',
              label: 'Efficiency'
            },
            {
              value: 'controllability',
              label: 'Controllability'
            }
          ]
        },
        {
          value: 'navigation',
          label: 'Navigation',
          children: [
            {
              value: 'side nav',
              label: 'Side Navigation'
            },
            {
              value: 'top nav',
              label: 'Top Navigation'
            }
          ]
        }
      ]
    }
  ]
})

/* 方法 */
/**
 * 显示上传文件
 */
const onShowUpload = () => {
  openModal(
    ImportIncomingPartNum,
    {},
    {
      title: '导入进件号查询',
      width: '480px',
      height: 'auto',
      useDefaultButton: true,
      okButtonText: '确定',
      async onOk(modal, component) {
        // TODO
        console.log('component', component.submit)
        await component.submit()
        modal.close()
      },
      onClose(modal) {
        modal.close()
      }
    }
  )
}

/* 计算 */

/* 监听 */

/* 周期 */
onMounted(() => {})

/* 暴露 */
defineExpose({
  $: proxy.$
})
</script>

<!--render-->
<template>
  <div class="page bg-[#fff]">
    <el-button type="text">
      测试
    </el-button>
    <BaseQueryFilter.Main>
      <BaseQueryFilter.Col>
        <el-input
          v-model="queryData.projName"
          clearable
          placeholder="项目名称"
        />
      </BaseQueryFilter.Col>
      <BaseQueryFilter.Col>
        <el-input
          v-model="queryData.projName"
          clearable
          placeholder="项目编号"
        />
      </BaseQueryFilter.Col>
      <BaseQueryFilter.Col :span="12">
        <el-select
          v-model="queryData.payWay"
          placeholder="请选择"
          filterable
          multiple
        >
          <el-option
            v-for="item in options.payWay"
            :key="item.key"
            :value="item.key"
            :label="item.label"
          />
        </el-select>
      </BaseQueryFilter.Col>
      <BaseQueryFilter.Col>
        <el-cascader
          v-model="queryData.fields1"
          class="w-full"
          :options="options.opt1"
          placeholder="地区"
        />
      </BaseQueryFilter.Col>
      <BaseQueryFilter.Col>
        <el-cascader
          v-model="queryData.fields2"
          class="w-full"
          :props="{ multiple: true }"
          :options="options.opt1"
          placeholder="地区"
        />
      </BaseQueryFilter.Col>
      <BaseQueryFilter.Col>
        <BaseQueryFilter.InputImportFile
          v-model="queryData.aa"
          placeholder="进件号"
          @upload="onShowUpload"
        />
      </BaseQueryFilter.Col>
      <BaseQueryFilter.Col>
        <BaseQueryFilter.InputRange
          v-model="queryData.aa"
          prefix-placeholder="请输入最小值"
          suffix-placeholder="请输入最大值"
        />
      </BaseQueryFilter.Col>
      <BaseQueryFilter.Col>
        <el-input />
      </BaseQueryFilter.Col>
      <BaseQueryFilter.Col>
        <el-input />
      </BaseQueryFilter.Col>
      <BaseQueryFilter.Col>
        <el-input />
      </BaseQueryFilter.Col>
      <BaseQueryFilter.Col>
        <el-input />
      </BaseQueryFilter.Col>
    </BaseQueryFilter.Main>
    <!-- 内容区 -->
  </div>
</template>

<!--style-->
<style scoped lang="less">
.page {
}
</style>
